<!-- 用户管理模块 -->
<template>
  <div class="">
    <yg-table
      :columns="tableColumns"
      :tableList="tableData"
      :height="'650'"
      :handleCellClassName="handleCellClassName"
      :handleCellClick="handleCellClick"
    >
      <!-- <el-table-column slot="icon1Column" label="图标列1" width="100px">
        <template slot-scope="scope">
          <i :class="scope.row.icon1"></i>
          <i
            v-for="(icon, index) in scope.row.icons"
            :key="index"
            :class="icon"
          ></i>
        </template>
      </el-table-column>

      <el-table-column slot="icon2Column" label="图标列2" width="100px">
        <template slot-scope="scope">
          <i :class="scope.row.icon2"></i>
        </template>
      </el-table-column>
      <el-table-column slot="icon2Column" label="图标列2" width="100px">
        <template slot-scope="scope">
          <template v-for="(child, index) in scope.row.children">
            <i :key="index" :class="child.icon2"></i>
          </template>
        </template>
      </el-table-column> -->
    </yg-table>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import moment from "moment";
import { myStorage } from "@/utils/localStorage";
import YgTable from "@/components/Table/YgTable.vue";
import YgFrom from "@/components/Form/YgFrom.vue";
import {
  setMessageCallback,
  publishMsg,
  removeMessageCallback,
  checkSpecialId,
} from "@/mqtt";
export default {
  //import引入的组件需要注入到对象中才能使用
  name: "ParamUser",
  components: {
    YgTable,
    YgFrom,
  },
  data() {
    //这里存放数据
    return {
      tableData: [
        {
          name: "支路1",
          A: 6.5,
          B: 7.2,
          C: 3.3,
          GJ: [
            { yx1: 1, yx2: 0, yx3: 0, yx4: 0, yx5: 0 },
            { yx1: 0, yx2: 1, yx3: 0, yx4: 0, yx5: 0 },
            { yx1: 0, yx2: 0, yx3: 1, yx4: 0, yx5: 0 },
          ],
        },
        {
          name: "支路2",
          A: 8.9,
          B: 4.3,
          C: 5.7,
          GJ: [
            { yx1: 0, yx2: 0, yx3: 0, yx4: 0, yx5: 0 },
            { yx1: 0, yx2: 0, yx3: 0, yx4: 0, yx5: 1 },
            { yx1: 0, yx2: 0, yx3: 0, yx4: 0, yx5: 0 },
          ],
        },
        {
          name: "支路3",
          A: 9.9,
          B: 1.2,
          C: 10.4,
          GJ: [
            { yx1: 0, yx2: 0, yx3: 0, yx4: 0, yx5: 1 },
            { yx1: 0, yx2: 0, yx3: 1, yx4: 0, yx5: 0 },
            { yx1: 1, yx2: 0, yx3: 0, yx4: 0, yx5: 0 },
          ],
        },
        // {
        //   name: "John",
        //   children: [
        //     { icon: "el-icon-star-on" },
        //     { icon: "el-icon-message" },
        //   ],
        // },
        // {
        //   icons: [
        //     "el-icon-user",
        //     "el-icon-user",
        //     "el-icon-user",
        //     "el-icon-user",
        //     "el-icon-user",
        //   ],
        //   icon2: "el-icon-star-on",
        //   alarm_type: 1,
        //   childProp11: 11,
        //   childProp12: 1,
        //   childProp13: 2,
        //   childProp14: 3,
        //   childProp15: 4,
        //   childProp1: 1,
        //   childProp2: 2,
        //   childProp3: 3,
        //   childProp4: 4,
        //   childProp5: 5,
        // },
      ],
      tableColumns: [
        {
          label: "汇流箱",
          prop: "name",
        },
        {
          label: "1-1",
          prop: "A",
        },
        {
          label: "1-2",
          prop: "B",
        },
        {
          label: "1-3",
          prop: "C",
        },
        // 可以添加更多列配置...
      ],
      columns: [
        {
          prop: "icon1",
          label: "图标列1",
          width: "100px",
          slot: "icon1Column",
        },
        {
          prop: "icon2",
          label: "图标列2",
          width: "100px",
          slot: "icon2Column",
        },
        {
          prop: "alarm_type",
          label: "告警类型",
          formatter(row) {
            if (row.hasOwnProperty("alarm_type")) {
              let state = row.alarm_type;
              var stateMap = {
                1: "遥信变位",
                2: "遥测越限",
                3: "网关事件",
                4: "终端事件",
                5: "遥控事件",
                6: "遥调事件",
              };
              return stateMap[state];
            } else {
              return "";
            }
          },
        },
        {
          multi: true, // 是否多级表头
          label: "1-1",
          children: [
            {
              prop: "childProp11", // 子列的属性名
              label: "电流",
            },
            {
              prop: "icon2",
              label: "图标列2",
              slot: "icon2Column",
            },
            {
              prop: "icon2",
              label: "图标列2",
              slot: "icon2Column",
            },
            {
              prop: "childProp12", // 子列的属性名
              label: "告警1",
            },
            {
              prop: "childProp13", // 子列的属性名
              label: "告警2",
            },
            {
              prop: "childProp14", // 子列的属性名
              label: "告警3",
            },
            {
              prop: "childProp15", // 子列的属性名
              label: "告警4",
            },
            // 可以添加更多子列...
          ],
          // 其他配置项...
        },
        {
          multi: true, // 是否多级表头
          label: "1-2",
          children: [
            {
              prop: "childProp1", // 子列的属性名
              label: "电流",
            },
            {
              prop: "childProp2", // 子列的属性名
              label: "告警1",
            },
            {
              prop: "childProp3", // 子列的属性名
              label: "告警2",
            },
            {
              prop: "childProp4", // 子列的属性名
              label: "告警3",
            },
            {
              prop: "childProp5", // 子列的属性名
              label: "告警4",
            },
            // 可以添加更多子列...
          ],
          // 其他配置项...
        },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // setMessageCallback(this.onMessage);
  },
  //方法集合
  methods: {
    handleCellClick(row, column, cell, event) {
      console.log(row, column, cell, event);
      const rowIndex = this.tableData.indexOf(row);
      const columnId = column.id;
      const columnIndex = this.tableColumns.findIndex(
        (col) => col.id === columnId
      );
      const cellValue = row[column.property];
      console.log("点击的单元格信息：");
      console.log("行索引：", rowIndex);
      console.log("列索引：", columnIndex);
      console.log("单元格值：", cellValue);
    },
    // handleCellStyle({ row, column, rowIndex, columnIndex }) {
    //   if (columnIndex != 0) {
    //     // console.log(row, column, rowIndex, columnIndex);
    //     if (row.GJ[columnIndex - 1].yx1 == 1) {
    //       return { color: "#FF4040", fontWeight: "bold" }; //红
    //     }
    //     if (row.GJ[columnIndex - 1].yx2 == 1) {
    //       return { color: "#989696", fontWeight: "bold" }; //红
    //     }
    //     if (row.GJ[columnIndex - 1].yx3 == 1) {
    //       return { color: "#FF8400", fontWeight: "bold" }; //红
    //     }
    //     if (row.GJ[columnIndex - 1].yx4 == 1) {
    //       return { color: "#F7DA00", fontWeight: "bold" }; //红
    //     }
    //     if (row.GJ[columnIndex - 1].yx5 == 1) {
    //       return { color: "#AE43FF", fontWeight: "bold" }; //红
    //     }
    //     return { color: "#5C85FF", fontWeight: "bold" }; //蓝
    // },
    // handleRowStyle({ row, rowIndex }) {
    //   console.log(row, rowIndex);
    // },
    handleCellClassName({ row, column, rowIndex, columnIndex }) {
      console.log(row, column, rowIndex, columnIndex);
      if (columnIndex != 0) {
        if (row.GJ[columnIndex - 1].yx1 == 1) {
          return "GJ1"; //红
        }
        if (row.GJ[columnIndex - 1].yx2 == 1) {
          return "GJ2"; //红
        }
        if (row.GJ[columnIndex - 1].yx3 == 1) {
          return "GJ3"; //红
        }
        if (row.GJ[columnIndex - 1].yx4 == 1) {
          return "GJ4"; //红
        }
        if (row.GJ[columnIndex - 1].yx5 == 1) {
          return "GJ5"; //红
        }
        return ""; //蓝
      }
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {
    // setTimeout(() => {
    //   this.Onmessage();
    // }, 200);
  }, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  beforedestroy() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  destroyed() {
    // removeMessageCallback(this.onMessage);
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-card__body {
  padding: 5px 5px 5px 5px;
}
::v-deep .GJ1 {
  animation: blinker 1s linear infinite;
  color: #ff4040;
  font-weight: bold; /*字体颜色为红色*/
}
::v-deep .GJ2 {
  animation: blinker 1s linear infinite;
  color: #989696;
  font-weight: bold; /*字体颜色为红色*/
}
::v-deep .GJ3 {
  animation: blinker 1s linear infinite;
  color: #ff8400;
  font-weight: bold; /*字体颜色为红色*/
}
::v-deep .GJ4 {
  animation: blinker 1s linear infinite;
  color: #f7da00;
  font-weight: bold; /*字体颜色为红色*/
}
::v-deep .GJ5 {
  animation: blinker 1s linear infinite;
  color: #ae43ff;
  font-weight: bold; /*字体颜色为红色*/
}
@keyframes blinker {
  /*关键帧动画*/
  50% {
    opacity: 0;
  }
}
</style>
